<template>
  <div class="messages-container">
    <div class="messages-header">
      <h1>消息中心</h1>
      <div class="message-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ active: currentTab === tab.id }"
          @click="currentTab = tab.id"
        >
          {{ tab.name }}
          <span v-if="tab.count" class="badge">{{ tab.count }}</span>
        </button>
      </div>
    </div>

    <div class="messages-content">
      <div class="conversations-list">
        <div 
          v-for="conversation in filteredConversations" 
          :key="conversation.id"
          class="conversation-item"
          :class="{ active: selectedConversation?.id === conversation.id }"
          @click="selectConversation(conversation)"
        >
          <div class="conversation-avatar">
            <img :src="conversation.avatar" :alt="conversation.name">
            <span v-if="conversation.online" class="online-status"></span>
          </div>
          <div class="conversation-info">
            <div class="conversation-header">
              <span class="conversation-name">{{ conversation.name }}</span>
              <span class="conversation-time">{{ conversation.lastMessageTime }}</span>
            </div>
            <div class="conversation-preview">
              <span class="message-preview">{{ conversation.lastMessage }}</span>
              <span v-if="conversation.unread" class="unread-badge">{{ conversation.unread }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="chat-container" v-if="selectedConversation">
        <div class="chat-header">
          <div class="chat-user-info">
            <img :src="selectedConversation.avatar" :alt="selectedConversation.name">
            <div class="user-meta">
              <span class="user-name">{{ selectedConversation.name }}</span>
              <span class="user-status">{{ selectedConversation.online ? '在线' : '离线' }}</span>
            </div>
          </div>
          <div class="chat-actions">
            <button class="action-btn">
              <i class="fas fa-phone"></i>
            </button>
            <button class="action-btn">
              <i class="fas fa-video"></i>
            </button>
            <button class="action-btn">
              <i class="fas fa-ellipsis-h"></i>
            </button>
          </div>
        </div>

        <div class="messages-list" ref="messagesList">
          <div 
            v-for="message in selectedConversation.messages" 
            :key="message.id"
            class="message-item"
            :class="{ 'message-sent': message.isSent }"
          >
            <div class="message-content">
              <div class="message-text">{{ message.content }}</div>
              <div class="message-time">{{ message.time }}</div>
            </div>
          </div>
        </div>

        <div class="message-input">
          <div class="input-actions">
            <button class="action-btn">
              <i class="fas fa-smile"></i>
            </button>
            <button class="action-btn">
              <i class="fas fa-paperclip"></i>
            </button>
          </div>
          <input 
            type="text" 
            v-model="newMessage"
            placeholder="输入消息..."
            @keyup.enter="sendMessage"
          >
          <button class="send-btn" @click="sendMessage">发送</button>
        </div>
      </div>

      <div v-else class="no-conversation">
        <div class="empty-state">
          <i class="fas fa-comments"></i>
          <p>选择一个对话开始聊天</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'

const currentTab = ref('private')
const selectedConversation = ref<any>(null)
const newMessage = ref('')
const messagesList = ref<HTMLElement | null>(null)

const tabs = [
  { id: 'private', name: '私信', count: 3 },
  { id: 'system', name: '系统通知', count: 5 },
  { id: 'mention', name: '提及', count: 2 }
]

// 模拟会话数据
const conversations = ref([
  {
    id: 1,
    name: '用户1',
    avatar: '/avatars/user1.jpg',
    online: true,
    lastMessage: '你好，最近怎么样？',
    lastMessageTime: '14:30',
    unread: 2,
    isSystem: false,
    messages: [
      {
        id: 1,
        content: '你好，最近怎么样？',
        time: '14:30',
        isSent: false
      },
      {
        id: 2,
        content: '我很好，谢谢关心！',
        time: '14:31',
        isSent: true
      }
    ]
  },
  {
    id: 2,
    name: '用户2',
    avatar: '/avatars/user2.jpg',
    online: false,
    lastMessage: '系统通知：您的帖子已被置顶',
    lastMessageTime: '昨天',
    unread: 0,
    isSystem: true,
    messages: [
      {
        id: 1,
        content: '系统通知：您的帖子已被置顶',
        time: '昨天',
        isSent: false
      }
    ]
  }
])

const filteredConversations = computed(() => {
  return conversations.value.filter(conversation => {
    if (currentTab.value === 'private') {
      return !conversation.isSystem
    }
    return conversation.isSystem
  })
})

const selectConversation = (conversation: any) => {
  selectedConversation.value = conversation
  conversation.unread = 0
  scrollToBottom()
}

const sendMessage = async () => {
  if (!newMessage.value.trim() || !selectedConversation.value) return

  const message = {
    id: Date.now(),
    content: newMessage.value,
    time: new Date().toLocaleTimeString(),
    isSent: true
  }

  selectedConversation.value.messages.push(message)
  selectedConversation.value.lastMessage = newMessage.value
  selectedConversation.value.lastMessageTime = message.time
  newMessage.value = ''

  await nextTick()
  scrollToBottom()
}

const scrollToBottom = () => {
  if (messagesList.value) {
    messagesList.value.scrollTop = messagesList.value.scrollHeight
  }
}

onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.messages-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

.messages-header {
  margin-bottom: 2rem;
}

.messages-header h1 {
  margin: 0 0 1rem;
  color: #2c3e50;
}

.message-tabs {
  display: flex;
  gap: 1rem;
}

.tab-btn {
  padding: 0.8rem 1.5rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.tab-btn.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.messages-content {
  flex: 1;
  display: flex;
  gap: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.conversations-list {
  width: 300px;
  border-right: 1px solid #eee;
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.conversation-item:hover {
  background-color: #f5f5f5;
}

.conversation-item.active {
  background-color: #f0f9f4;
}

.conversation-avatar {
  position: relative;
}

.conversation-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #42b983;
  border: 2px solid white;
  border-radius: 50%;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.conversation-name {
  font-weight: 500;
  color: #2c3e50;
}

.conversation-time {
  font-size: 0.9rem;
  color: #666;
}

.conversation-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-preview {
  color: #666;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-badge {
  background: #e74c3c;
  color: white;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.chat-user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chat-user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 500;
  color: #2c3e50;
}

.user-status {
  font-size: 0.9rem;
  color: #666;
}

.chat-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
}

.messages-list {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message-item {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.message-item.message-sent {
  align-self: flex-end;
}

.message-content {
  background: #f5f5f5;
  padding: 0.8rem;
  border-radius: 8px;
}

.message-sent .message-content {
  background: #42b983;
  color: white;
}

.message-text {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.message-time {
  font-size: 0.8rem;
  color: #666;
}

.message-sent .message-time {
  color: rgba(255,255,255,0.8);
}

.message-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid #eee;
}

.input-actions {
  display: flex;
  gap: 0.5rem;
}

.message-input input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.send-btn {
  padding: 0.8rem 1.5rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.no-conversation {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  text-align: center;
  color: #666;
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #ddd;
}
</style> 